<template>
    <div class="sifter-box flex-row-center" v-if="isEdit==0">
        <el-form :inline="true" :model="sifterForm" class="demo-form-inline">
            <el-form-item label="筛选：">
                <el-input v-model="sifterForm.key" placeholder="输入报修关键字" @input="proxy.$utils.debounce(updalist,sifterForm)"></el-input>
            </el-form-item>
        </el-form>
        <div>
            <el-button type="primary" plain :loading="false" @click.prevent="editData()">添加</el-button>
        </div>
    </div>

    <div class="listDiv" v-if="isEdit==0">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="title" label="报修标题"> </el-table-column>
            <el-table-column prop="msg" label="内容" width="100">
                <template #default="props">
                    <span v-if="props.row.isme!=0" class="pointer mr10 base-color" @click="editData(props.row,3)">查看</span>
                </template>
            </el-table-column>
            <el-table-column prop="cover" label="图片" width="100">
                <template #default="props">
                    <el-image style="width: 40px; height: 40px" fit="contain" :preview-src-list="[proxy.$setting.globalUrl.fileurl+ '/repair/'+ props.row.imgs.split(',')[0]]" :src="proxy.$setting.globalUrl.fileurl+ '/repair/'+ props.row.imgs.split(',')[0]">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="faultusername" label="维修人员"> </el-table-column>
            <el-table-column prop="faulttime" label="维修时间" width="180"> </el-table-column>
            <el-table-column prop="verify" label="审核状态" width="100">
                <template #default="props">
                    <span>{{props.row.state==0?'未处理':'已完成'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="100">
                <template #default="props">
                    <span v-if="props.row.isme!=0" class="pointer mr10" @click="editData(props.row)"><el-icon color="#409EFC"><edit/></el-icon></span>
                    <span v-if="props.row.isme!=0" class="pointer" @click="delData(props.row)"><el-icon color="#F56C6C"><delete /></el-icon></span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span v-if="isEdit!=3">{{isEdit==1?'提交':'编辑'}}报修内容</span>
            <span v-if="isEdit==3">查看报修内容</span>
        </div>
        <div class="form-box">
            <el-form v-if="isEdit!=3" ref="ruleFormRef" :inline="true" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
                <el-form-item class="w96" :rules="[ { required: true, message: '标题不能为空'} ]" label="报修标题" prop="title">
                    <el-input autocomplete="off" clearable v-model="form.title"></el-input>
                </el-form-item>
                <br/>
                <el-form-item class="w96" :rules="[ { required: true, message: '报修内容不能为空'} ]" label="报修内容" prop="msg">
                    <el-input type="textarea" autocomplete="off" clearable v-model="form.msg"></el-input>
                    <!-- <Editer @update:value="(e)=>{form.msg = e}" :value="form.msg"/> -->
                </el-form-item>
                <br/>
                <el-form-item label="照片">
                    <upfileSingle @update:file="(e)=>{form.imgs = e}" :file="form.imgs" dir="repair"></upfileSingle>
                </el-form-item>
                <br/>
                <el-form-item label=" " label-width="120px">
                    <el-button type="primary" class="btn" :loading="false" @click.prevent="submit" native-type="submit">提交</el-button>
                </el-form-item>
            </el-form>
            <div v-if="isEdit==3" class="">
                <div v-html="form.msg"></div>
                <div v-if="form.imgs&&form.imgs.split(',').length">
                    <el-image v-for="(v,i) in form.imgs.split(',')" :key="i" fit="contain" :preview-src-list="[proxy.$setting.globalUrl.fileurl+ '/repair/'+ v]" :src="proxy.$setting.globalUrl.fileurl+ '/repair/'+ v">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete } from '@element-plus/icons-vue'
    import Editer from '../../components/editer.vue'
    import upfileSingle from '../../components/upfile_single.vue'

    let { proxy } = getCurrentInstance()
    let obj = reactive({
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            key: '',
            currentpage: 1,
            pagesize: 10
        },
        form: {
            "repair_id":"0",
            "title":"",
            "msg":"",
            "imgs_old":"",
            "imgs":""
        },
        ruleFormRef: null,
    });

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'repair/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const delData = (item)=>{
            proxy.$ajax({url: 'repair/delete',data:{repair_id:item.repair_id},bfLoading: true}).then(d => {
                console.log(d);
                if(d.success){
                    proxy.elMessageMixin('删除成功！', 'success')
                    updalist()
                }else{proxy.elMessageMixin(date.err, 'error')}
            }).catch(e => {
                if(e == "登录已过期，请重新登录"){
                    proxy.routerPushMixin('/')
                }
            })
    }

    const re_turn = ()=>{
        isEdit.value = 0;
        form.value = {
            "repair_id":"0",
            "title":"",
            "msg":"",
            "imgs_old":"",
            "imgs":""
        }
    }

    const editData = (item,isEditidx)=>{
        console.log(item);
        if(item){
            proxy.$ajax({url: 'repair/get',data:{repair_id:item.repair_id},bfLoading: true}).then(d => {
                console.log(d);
                if(d.success){
                    form.value = {
                        ...d.msg,
                        repair_id: item.repair_id,
                        imgs_old: form.value.imgs
                    }
                    isEdit.value = isEditidx||2
                }else{}
            }).catch(e => {
                console.log(e)
                if(e == "登录已过期，请重新登录"){
                    proxy.routerPushMixin('/')
                }
            })
        }else{
            isEdit.value = 1
        }
    }

    const submit = ()=>{
      if (ruleFormRef) {
        ruleFormRef.value.validate((valid) => {
          if (valid) {
                console.log(form.value);
                let param = {
                    ...form.value,
                    repair_id:form.value.repair_id||0
                }
                // return 
                proxy.$ajax({url: 'repair/design',data:param,bfLoading: true}).then(d => {
                    console.log(d);
                    if(d.success){
                        form.value = {
                            "repair_id":"0",
                            "title":"",
                            "msg":"",
                            "imgs_old":"",
                            "imgs":""
                        }
                        proxy.elMessageMixin('编辑成功！', 'success')
                        isEdit.value = 0
                        updalist()
                    }else{proxy.elMessageMixin(date.err, 'error')}
                }).catch(e => {
                    console.log(e)
                    if(e == "登录已过期，请重新登录"){
                        proxy.routerPushMixin('/')
                    }
                })
          } else {
            return false;
          }
        });
      }
    }
    
    let { list, sifterForm, form, isEdit, ruleFormRef, types, verifys, total } = toRefs(obj)
</script>

<style lang="scss" scoped>
  .el-table{//为了不遮盖预览图
    & ::v-deep th.el-table__cell,
    ::v-deep td.el-table__cell {
      // 设置position 使得 子元素不与其产生新的层叠关系
      position: static;
    }
  }
</style>